<template>
  <BasicModal
    @register="registerModal"
    title="查看详情"
    :showCancelBtn="false"
    @ok="handleClose"
    @cancel="handleClose"
    width="60%"
  >
    <Spin :spinning="spinning">
      <div style="display: flex">
        <div style="width: 50%">
          <TablesCom
            :columns="recheckSchemas"
            @success="handleSuccess"
            :useSearchForm="false"
            :pagination="false"
          >
            <template #action="{ rowData }">
              <TableAction
                v-if="rowData.resultId !== nowResultId"
                :actions="[{ label: '查看', onClick: handleView.bind(null, rowData) }]"
              />
              <TableAction
                v-else
                :actions="[{ label: '查看中', onClick: handleView.bind(null, rowData) }]"
              />
            </template>
          </TablesCom>
        </div>
        <Row :gutter="[20, 20]" class="details-row" v-loading="loadingRef">
          <template v-if="list.length">
            <div class="flex" style="margin-top: 12px; height: 22px; width: 100%">
              <Setting :list="list" v-model:checked="activeKeys" :defaultKeys="defaultKeys" />
            </div>
            <Col :span="12" v-for="(item, index) in renderList" :key="index">
              {{ item.title }}：<span style="color: #a3a3a3">{{ item.value || '-' }}</span>
            </Col>
          </template>
          <div class="no-data" v-else>
            <img :src="emptyImg" />
            <div>暂无数据</div>
          </div>
        </Row>
      </div>
    </Spin>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { Spin, Row, Col } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { CommonParam } from '../types';
  import Setting from './setting.vue';
  import TablesCom from './TablesCom.vue';
  import { TableAction } from '/@/components/Table';
  import { recheckSchemas } from '../index.data';
  import { getRecheckWaterMeterByCode, getRecodIdList } from '/@/api/jd/water-box';
  import emptyImg from '/@/assets/images/table-empty.png';

  const loadingRef = ref<boolean>(false);

  let setTableData: Fn;

  const spinning = ref<boolean>(true);

  const waterMetaCode = ref('');
  let task_id = '';

  const list = ref<CommonParam[]>([]);

  const nowResultId = ref('');

  const activeKeys = ref<number[]>([1, 14, 18, 19, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 38, 40]);

  const defaultKeys = ref([1, 14, 18, 19, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 38, 40]);

  const [registerModal, { closeModal }] = useModalInner(async (data) => {
    waterMetaCode.value = data.waterMeterCode;
    task_id = data.task_id;
    let result = await getRecheckWaterMeterByCode({
      waterMeterCode: waterMetaCode.value,
      taskId: data.task_id,
    });
    setTableData(result);

    if (result && result.length) {
      handleView(result[0]);
    }

    spinning.value = false;
  });

  const handleSuccess = (val) => {
    setTableData = val.setTableData;
  };

  const handleView = async (result) => {
    nowResultId.value = result.resultId;
    loadingRef.value = true;

    const ret = await getRecodIdList({
      resultId: result.resultId,
      taskId: task_id,
    });

    loadingRef.value = false;
    list.value = [
      { id: 1, title: '水表表码', value: ret.waterMeterCode },
      { id: 2, title: '强检序号', value: ret.number },
      { id: 3, title: '送检单位', value: ret.firm },
      { id: 4, title: '生产厂家', value: ret.factory },
      { id: 5, title: '计量器具名称', value: ret.instrumentName },
      { id: 6, title: '表类型', value: ret.waterCodeType },
      { id: 7, title: '型号规格', value: ret.typeSpec },
      { id: 8, title: '口径', value: ret.caliberDn },
      { id: 9, title: '检定依据', value: ret.verifyingBasic },
      { id: 10, title: '标准装置', value: ret.standardDevice },
      { id: 11, title: '检定参数', value: ret.verifyingParam },
      { id: 12, title: '环境温度', value: ret.indoorTemperature },
      { id: 13, title: '相对湿度', value: ret.relativeHumidity },
      { id: 14, title: '检定日期', value: ret.checkDate },
      { id: 15, title: '有效期至', value: ret.validUntil },
      { id: 16, title: '电子装置功能判定', value: ret.transformTest },
      { id: 17, title: '密封性', value: ret.pressureTest },
      { id: 18, title: '示值误差判定', value: ret.indicationErrorResult },
      { id: 19, title: '检定结果', value: ret.result },
      { id: 20, title: '装置编号', value: ret.deviceNumber },
      { id: 21, title: '准确度等级', value: ret.accuracyClass },
      { id: 22, title: '水温', value: ret.pipeTemperature },
      { id: 23, title: '水压', value: ret.pipePressure },
      { id: 24, title: '脉冲当量', value: ret.pulseEquivalent },
      { id: 25, title: '密度', value: ret.density },
      { id: 26, title: '示值误差', value: ret.indicationError },
      { id: 27, title: '机电转换误差', value: ret.eleMechanialError },
      { id: 28, title: 'Q₁', value: ret.q1 },
      { id: 29, title: 'Q₂', value: ret.q2 },
      { id: 30, title: 'Q₃', value: ret.q3 },
      { id: 31, title: 'Q₄', value: ret.q4 },
      { id: 32, title: 'Q₂/Q₁', value: ret.q2q1 },
      { id: 33, title: 'Q₄/Q₃', value: ret.q4q3 },
      { id: 34, title: 'Q₃/Q₁', value: ret.q3q1 },
      { id: 35, title: '最大流量', value: ret.maxFlow },
      { id: 36, title: '最小流量', value: ret.minFlow },
      { id: 37, title: '常用流量', value: ret.commonFlow },
      { id: 38, title: '机电转换误差限', value: ret.eleMechanialErrorLimit },
      { id: 39, title: '复检', value: ret.recheck },
      { id: 40, title: '外观、标志和封印', value: ret.visualInspection },
      { id: 41, title: '数据描述', value: ret.dataSrc },
    ];
  };

  const handleClose = () => {
    list.value = [];

    closeModal();
  };

  const renderList = computed(() => list.value.filter((i) => activeKeys.value.includes(i.id)));
</script>

<style lang="less" scoped>
  .details-row {
    width: 50%;
    align-content: flex-start;
  }

  .no-data {
    width: 100%;
    margin: auto;
    text-align: center;
    color: rgba(0, 0, 0, 0.25);

    img {
      display: block;
      margin: auto;
    }
  }
</style>
